<template>
  <div class="profile-container">
    <h2>个人中心</h2>
    <el-card v-if="authState.isLoggedIn && userInfo" class="profile-card">
      <template #header>
        <div class="card-header">
          <span>用户信息</span>
        </div>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ userInfo.user_id }}</el-descriptions-item>
        <el-descriptions-item label="角色">
          <el-tag :type="roleTagType(userInfo.role)">{{ formatRole(userInfo.role) }}</el-tag>
        </el-descriptions-item>
        <!-- 你可以根据需要添加更多从 authState.user 或 localStorage 获取的信息 -->
        <!-- 例如，如果后端返回了 email, group_id 等，并且你存储了它们 -->
      </el-descriptions>
      <!-- 可以添加编辑信息、修改密码等按钮 -->
      <div style="margin-top: 20px;">
        <el-button type="primary" @click="editProfile">编辑信息</el-button>
        <el-button type="warning" @click="changePassword">修改密码</el-button>
      </div>
    </el-card>
    <el-empty v-else-if="!authState.isLoggedIn" description="请先登录查看个人信息">
      <el-button type="primary" @click="$router.push('/login')">去登录</el-button>
    </el-empty>
    <el-alert v-else title="无法加载用户信息" type="warning" show-icon />
  </div>
</template>

<script>
import { authState, updateUserState } from '../simpleStore.js'; // 确保路径正确
import { ElMessage } from 'element-plus';

export default {
  name: 'ProfileView',
  setup() {
    // 确保组件创建时状态是最新的
    // (虽然 NavBar 和 App.vue 可能已经调用，但视图组件自身也调用一次以防万一)
    // updateUserState(); // 如果你确信其他地方会调用，这里可以省略，避免不必要的重复调用
    return {
      authState
    };
  },
  computed: {
    userInfo() {
      // 假设登录时返回的信息都存储在 localStorage 或 authState.user 对象里
      // 在 simpleStore.js 中，我们目前只存了 username, role, user_id
      // 如果后端返回了更多信息，确保它们被存起来并在 authState.user 中可访问
      if (this.authState.isLoggedIn) {
        // 从 localStorage 获取更完整用户信息 (如果你之前登录时存了更多)
        const userId = localStorage.getItem('user_id');
        const username = localStorage.getItem('username');
        const role = localStorage.getItem('role');
        // 你可以扩展 simpleStore.js 中的 authState.user 来包含更多字段
        // 或者在这里直接从 localStorage 读取
        if (username && role && userId) {
            return {
                username: username,
                user_id: userId,
                role: role
                // 你可以在LoginView登录成功后，将res.data（或其中需要的部分）完整存到localStorage
                // 例如: localStorage.setItem('userDetails', JSON.stringify(res.data));
                // 然后这里: const details = JSON.parse(localStorage.getItem('userDetails'));
                // return { ...details }
            };
        }
      }
      return null;
    }
  },
  methods: {
    formatRole(role) {
      if (role === 'student') return '学生';
      if (role === 'teacher') return '教师';
      if (role === 'admin') return '管理员';
      return role;
    },
    roleTagType(role) {
      if (role === 'student') return 'success';
      if (role === 'teacher') return 'warning';
      if (role === 'admin') return 'danger';
      return 'info';
    },
    editProfile() {
      ElMessage.info('编辑信息功能待实现');
      // this.$router.push('/profile/edit'); // 跳转到编辑页面
    },
    changePassword() {
      ElMessage.info('修改密码功能待实现');
      // this.$router.push('/profile/change-password'); // 跳转到修改密码页面
    }
  },
  created() {
    // 确保进入页面时，authState是最新的
    // 因为用户可能直接通过URL访问此页面，或者刷新页面
    updateUserState();

    // 如果用户未登录，但尝试访问 /profile，导航守卫会处理
    // 但这里也做一个检查，以防守卫配置有误或未来变化
    if (!this.authState.isLoggedIn) {
        // this.$router.push('/login'); 一般由路由守卫完成
    }
  }
};
</script>

<style scoped>
.profile-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}
.profile-card {
  margin-top: 20px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>